<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="app-container">
    <div>
      <div class="search-bar">
        <el-form :inline="true">
          <el-form-item label="搜索部门或员工">
            <el-input
              v-model="filterText"
              placeholder="搜索部门或员工"
              class="!w-[192px]"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="View" @click="expandAll">展开全部</el-button>
            <el-button icon="Fold" @click="collapseAll">折叠全部</el-button>
            <el-button
              icon="Plus"
              type="success"
              @click="departmentsync"
              v-hasPerm="'sys:organizational:async'"
            >
              数据同步
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 搜索和操作区 -->

      <!-- 组织树形结构 -->
      <div class="bg-white rounded-lg shadow-sm p-6">
        <el-tree
          ref="tree"
          v-loading="loading"
          :data="treeData"
          :props="defaultProps"
          :expand-on-click-node="false"
          node-key="id"
          default-expand-all
          :filter-node-method="filterNode"
        >
          <template #default="{ node, data }">
            <div class="flex items-center">
              <el-icon v-if="data.type === 'company'" class="mr-2 text-gray-400" />
              <el-icon v-else-if="data.type === 'department'" class="mr-2 text-gray-400">
                <Folder />
              </el-icon>
              <el-icon v-else class="mr-2 text-gray-400">
                <User />
              </el-icon>
              <span>{{ node.label }}</span>
              <span v-if="data.position" class="ml-2 text-gray-400">({{ data.position }})</span>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Search, View, Fold, Plus, Folder, User } from "@element-plus/icons-vue";
import organizationalAPI, { depPageQuery } from "@/api/basicData/organizational";
const queryParams = reactive<depPageQuery>({
  pageNum: 1,
  pageSize: 10,
});
const filterText = ref("");
const loading = ref(false);
watch(filterText, (val) => {
  tree.value!.filter(val);
});

const filterNode = (value: string, data: any, node: any) => {
  if (!value) return true;
  let parentNode = node.parent;
  let labels = [node.label];
  let level = 1;
  while (level < node.level) {
    labels = [...labels, parentNode.label];
    parentNode = parentNode.parent;
    level++;
  }
  return labels.some((label) => label.indexOf(value) !== -1);
};

const getDepList = () => {
  loading.value = true;
  organizationalAPI.getDepartmentList(queryParams).then((data: any) => {
    let depRes = data?.list;
    depRes.forEach((item: any, index: any) => {
      console.log(item);
      item.type = "department";
      item.id = index + 1;
      item.employees.forEach((items: any) => {
        items.type = "employee";
        items.name = items.employeeName;
      });
    });

    // let treeDatasa = [
    //   {
    //     deptId: 1,
    //     name: "原子信息技术(深圳)有限公司",
    //     type: "company",
    //     employees: depRes,
    //   },
    // ];
    treeData.value = depRes as any;
    loading.value = false;
  });
};
const queryFormRef = ref(ElForm);
const departmentsync = () => {
  filterText.value = "";
  // queryFormRef.value.resetFields();
  // console.log(queryFormRef);
  // queryParams.pageNum = 1;
  loading.value = true;
  organizationalAPI.departmentsync().then((data: any) => {
    loading.value = false;
    getDepList();
  });
};
const treeData = ref([]);
const tree = ref();

const expandAll = () => {
  console.log(tree);
  for (const key in tree.value.store.nodesMap) {
    if (tree.value.store.nodesMap.hasOwnProperty(key)) {
      const node = tree.value.store.nodesMap[key];
      node.expanded = true;
    }
  }
};

const collapseAll = () => {
  console.log(tree.value.store.nodesMap);
  for (const key in tree.value.store.nodesMap) {
    if (tree.value.store.nodesMap.hasOwnProperty(key)) {
      const node = tree.value.store.nodesMap[key];
      node.expanded = false;
    }
  }
};

const defaultProps = {
  children: "employees",
  label: "name",
};

onMounted(() => {
  getDepList();
});
</script>

<style lang="scss" scoped>
@use "@/styles/css/public" as *;

.el-tree {
  --el-tree-node-hover-bg-color: #f3f4f6;
}

.el-tree-node__content {
  height: 40px;
}

.el-tree-node__content:hover {
  background-color: var(--el-tree-node-hover-bg-color);
}
</style>
